<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>自定义进度条样式</title>
    <style>
        input[type="range"] {
            width: 700px;
            height: 10px;
            outline: none;
            /* 避免點選會有藍線或虛線 */
            background: #ccc;
            border-radius: 10px;
        }

        input[type="range"]::-moz-range-thumb {
            position: relative;
            /* 設為相對位置，為了前後區塊的絕對位置而設定 */
            width: 20px;
            height: 20px;
            background: #f22;
            border-radius: 50%;
            transition: .2s;
            /* 點選放大時候的漸變時間 */
        }

        input[type=range]::-moz-range-progress {
            border-radius: 10px;
            background: #f22;
            height: 10px;
        }

        .track-container {
            margin-left: 50px;
            --track-height: 3px;
            --track-thumb: 10px;
            --track-width: 500px;
            user-select: none;

            .track {
                position: relative;
                width: var(--track-width);
                height: var(--track-height);
                background: #ccc;
                user-select: none;
                cursor: pointer;
                transition: width .2s;

                .thumb {
                    position: absolute;
                    top: calc(50% - var(--track-thumb) / 2);
                    left: calc(var(--track-thumb) / -2);
                    width: var(--track-thumb);
                    height: var(--track-thumb);
                    background: #f22;
                    border-radius: 50%;
                    user-select: none;
                }

                .progress {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 0;
                    height: var(--track-height);
                    background: #f22;
                    user-select: none;
                }
            }
        }
    </style>
</head>

<body>
    <input type="range">

    <div class="track-container">
        <div class="track" id="track">
            <div class="progress" id="progress"></div>
            <div class="thumb" id="thumb"></div>
        </div>
    </div>
</body>
<script>
    const trackElement = document.getElementById('track');
    const thumbElement = document.getElementById('thumb');
    const progressElement = document.getElementById('progress');
    let progressValue = 0;
    thumbElement.onmousedown = function (e1) {
        console.log('thumbElement.onmousedown')
        //e1.stopPropagation()
        document.onmousemove = function (e2) {
            console.log('window.onmousemove')
            let x = e2.clientX - trackElement.offsetLeft
            x = x < 0 ? 0 : x >= trackElement.offsetWidth ? trackElement.offsetWidth : x
            progressValue = x
            thumbElement.style.left = x - thumbElement.offsetWidth / 2 + 'px';
            progressElement.style.width = x + 'px';
            console.log(x / trackElement.offsetWidth)

        }
    }
    document.onmouseup = function (e3) {
        console.log('鼠标抬起')
        document.onmousemove = null;
        //document.onmouseup = null;
    }
    trackElement.onclick = function (e) {
        e.preventDefault();
        console.log('trackElement.onclick')
        let x = e.clientX - trackElement.offsetLeft
        progressValue = x
        thumbElement.style.left = x - thumbElement.offsetWidth / 2 + 'px';
        progressElement.style.width = x + 'px';
        console.log(x / trackElement.offsetWidth)
    }

</script>

</html>